<template>
  <div>
    <div class="banner">
      <div class="w">
        <div class="banner-left">
          <ul style="padding: 0">
            <li v-for="(v, k) in uls" :key="k">
              <a href="#"> {{ v }} <span>></span> </a>
            </li>
          </ul>
        </div>
        <div class="banner-right">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(v, k) in imgs" :key="k">
              <img :src="v" style="width: 990px; height: 450px" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "RotationPart",
  setup() {
    const state = reactive({
      uls: [
        "手机",
        "电视",
        "笔记本 平板",
        "家电",
        "出行 穿戴",
        "智能 路由器",
        "电源 配件",
        "健康 儿童",
        "耳机 音箱",
        "生活 箱包",
      ],
      imgs: [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c98d4ee217c03042cdaaef7226ffd37.jpg?w=2452&h=920",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b717c9c84e44509496e993ed6b526c05.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9721d9d8b6ee711d975c93b34f6a95ca.png?thumb=1&w=1226&h=460&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b158441e01e7acd9ad27a49bbac4c0fa.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
      ],
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
/*版心*/
.w {
  width: 1226px;
  margin: auto;
}

li {
  float: left;
  list-style: none;
}

.nav ul li a:hover {
  color: #00a4ff;
  border-bottom: 2px solid #00a4ff;
}

/*banner部分*/
.banner {
  height: 450px;
}
.banner .w {
  height: 450px;
  // background: url("../assets/banner.png");
}
/*banner-left*/
.banner-left {
  float: left;
  height: 450px;
  width: 240px;
  background-color: #a2a0a0; /*设置半透明*/
}
.banner-left ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.banner-left ul li {
  width: 240px;
  height: 30px;
  margin-top: 15px;
  /*text-indent: 2em;*/
}
.banner-left ul li a {
  display: flex;
  flex-direction: row;
  margin: 0 25px;
  justify-content: space-between;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
}
.banner-left ul li a:hover {
  color: #88deff;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 450px;
  margin: 0;
  text-align: center;
}
/deep/ .el-carousel__container {
  height: 450px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>